<template>
  <div class="detail-container">
    <div class="top-wrapper">
      <div class="org-detail">
        <div class="org-info">
          <div class="i-top">
            <div class="t-left">
              <span class="title">{{detail.csName}}</span>
              <el-tag class="tagItem" size="small" type="primary">{{detail.typeSecond}}</el-tag>
            </div>
            <div class="t-right">
              <el-tag class="tagItem" size="small" type="success">启用中  NO:{{detail.id}}</el-tag>
            </div>
          </div>
          <div class="info-detail label-color">
            <div>场所地址：{{detail.fullAddress}}</div>
            <div>所属机构：{{detail.orgName}}</div>
            <div>统一社会信用代码：{{detail.unifiedCode}}</div>
          </div>
          <div class="info-detail label-color">
            <div>是否需要健康申报：{{detail.reportCheckNeed}}</div>
            <div>是否需要反馈提示音：--</div>
          </div>
          <div class="p-info">
            <div><i class="el-icon-user-solid"></i>场所码申领人：{{detail.applicantName}}</div>
            <div>联系电话：{{detail.applicantPhone}}</div>
            <div>身份证号：{{detail.applicantIdCard}}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom-wrapper">
      <div class="sta-data">
        <div class="item">
          <div class="title">今日扫码次数</div>
          <div class="total">累计扫码次数 {{stat.test1 | numFormat}} 次</div>
          <div class="today">
            <div class="val">{{stat.test2 | numFormat}}<span> 次</span></div>
            <div class="increase">较昨日 
              <span v-if="stat.test3 < 0" class="down"><i class="el-icon-caret-bottom"></i>{{stat.test3 | numToPercent}}</span>
              <span v-else class="up"><i class="el-icon-caret-top"></i>{{stat.test3 | numToPercent}}</span>
            </div>
          </div>
        </div>
        <div class="item">
          <div class="title">实时每分钟扫码</div>
          <div class="total">最大扫码峰值 {{stat.test4 | numFormat}} 次</div>
          <div class="today">
            <div class="val">{{stat.test5 | numFormat}}<span> 次</span></div>
            <div class="increase">较昨日 
              <span v-if="stat.test6 < 0" class="down"><i class="el-icon-caret-bottom"></i>{{stat.test6 | numToPercent}}</span>
              <span v-else class="up"><i class="el-icon-caret-top"></i>{{stat.test6 | numToPercent}}</span>
            </div>
          </div>
        </div>
        <div class="item">
          <div class="title">扫码失败次数</div>
          <div class="today">
            <div class="val error-color">{{stat.test7 | numFormat}}<span> 次</span></div>
          </div>
        </div>
      </div>
      <div class="chart-data">
        <div class="item">
          <div class="title">
            <div class="text">场所码扫码时间分布 <span>单位：次</span></div>
            <div class="button">
              <el-select v-model="unitValue" size="mini" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div>
          <div id="areaChart"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Column } from "@antv/g2plot";
export default {
  name: 'CodeMoniDetail',
  data() {
    return {
      stat:{
        test1: 234234,
        test2: 9234, 
        test3: 0.1, 
        test4: 82384, 
        test5: 923, 
        test6: 0.78, 
        test7: 239042,
      },
      detail: {
        id: 0,
        csName: 'XX创业股', // 场所名
        typeSecond: '办公区域', // 场所类别
        fullAddress: '数学模型勤快艺术类不',
        orgName: '公司名称',
        unifiedCode: '2384202348',
        reportCheckNeed: '是',
        applicantName: '张三',
        applicantIdCard: '23402398420384',
        applicantPhone: '1302342038'
      },
      columnChart: [
        { name: "2021-11-1", value: 78364, },
        { name: "2021-11-2", value: 67832 },
        { name: "2021-11-3", value: 56738 },
        { name: "2021-11-4", value: 55923 },
        { name: "2021-11-5", value: 49847 },
        { name: "2021-11-6", value: 45982 },
        { name: "2021-11-7", value: 35003 },
        { name: "2021-11-8", value: 32913 },
        { name: "2021-11-9", value: 25003 },
        { name: "2021-11-10", value: 35233 },
        { name: "2021-11-11", value: 25233 },
        { name: "2021-11-12", value: 25233 },
        { name: "2021-11-13", value: 25233 },
        { name: "2021-11-14", value: 25233 },
        { name: "2021-11-15", value: 25233 },
        { name: "2021-11-16", value: 12233 },
        { name: "2021-11-17", value: 12003 },
        { name: "2021-11-18", value: 12003 },
        { name: "2021-11-19", value: 12003 },
        { name: "2021-11-20", value: 12003 },
        { name: "2021-11-21", value: 25633 },
        { name: "2021-11-22", value: 25633 },
        { name: "2021-11-23", value: 25633 },
        { name: "2021-11-24", value: 25633 },
        { name: "2021-11-25", value: 25633 },
        { name: "2021-11-26", value: 25003 },
        { name: "2021-11-27", value: 25003 },
        { name: "2021-11-28", value: 25003 },
        { name: "2021-11-29", value: 25003 },
        { name: "2021-11-30", value: 27003 },
        { name: "2021-12-1", value: 78364, },
        { name: "2021-12-2", value: 67832 },
        { name: "2021-12-3", value: 56738 },
        { name: "2021-12-4", value: 55923 },
        { name: "2021-12-5", value: 49847 },
        { name: "2021-12-6", value: 45982 },
        { name: "2021-12-7", value: 35003 },
        { name: "2021-12-8", value: 32913 },
        { name: "2021-12-9", value: 25003 },
      ],
      options: [{
        value: 'hour',
        label: '近一小时'
      }, {
        value: 'day',
        label: '近24小时'
      }, {
        value: 'week',
        label: '近7天'
      }, {
        value: 'month',
        label: '近30天'
      }],
      unitValue: 'hour'
    }
  },
  mounted(){
    this.initColumnChart();
  },
  methods:{
    initColumnChart(){
      let data = this.columnChart;
      const column = new Column('areaChart', {
        data,
        xField: 'name',
        yField: 'value',
        xAxis: {
          label: {
            autoRotate: false,
          },
        },
        slider: {
          start: 0.0,
          end: 0.9,
        },
      });
      column.render();
    },
  }
}
</script>
<style lang="scss" scoped>
.chart-data{
  margin-top: 1rem;
  .item{
    background-color: white;
    border-radius: 5px;
    // box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);
    margin-right: 15px;

    .title{
      display: flex;
      align-items: center;
      padding: 20px 0px 20px 0px;
      // border-bottom: solid 1px #e6e6e6;

      .text{
        flex: 1;
        margin: 0px 0px 0px 20px;
        font-weight: bold;
        height: 34px;
        display: flex;
        align-items: center;

        span{
          font-size: 0.8rem;
          color: #979fb9;
          font-weight: normal;
          padding-left: 10px;
        }
      }

      .button{
        width: 120px;
      }
    }
  }
}

.detail-container{
  margin: 10px;
}
.top-wrapper{
  background: #fff;
  padding: 20px;

  .org-detail{
    display:flex;
    display: -webkit-flex;
  }
}

.org-info{
  flex: 1;
  margin-left: 1rem;
  
  .i-top{
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;

    .title{
      font-weight: 700;
    }
    .tagItem{
      margin-left:1rem;
    }
  }
  .info-detail{
    font-size: 14px;
    display: flex;
    display: -webkit-flex;
    margin-top: 0.4rem;
    div:first-child{
      padding-right: 1rem;
    }
    div:not(:first-child){
      padding: 0 1rem;
      border-left: 1px solid #ced6e0;
    }
  }

  .p-info{
    font-size: 14px;
    display: flex;
    display: -webkit-flex;
    margin-top: 0.8rem;
    font-weight: 600;
    div:first-child{
      padding-right: 1.3rem;
    }
    div:not(:first-child){
      padding: 0 1.3rem;
    }
    i{
      color: #409eff;
      font-size: 18px;
      margin-right: 0.5rem;
    }
  }
}

.bottom-wrapper{
  margin-top: 1rem;
  background-color: #fff;
  padding: 1rem;
}

.sta-data{
  display: flex;
  display: -webkit-flex;
  .item{
    flex: 1;
    background-color: #f1f2f6;
    border-radius: 5px;
    // box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin-right: 15px;
    
    .title{
      font-weight: bold;
    }

    .total{
      color: #979fb9;
      margin-top: 7px;
    }

    .today{
      margin-top: 15px;
      display: flex;
      align-items: center;
      .val{
        flex: 6;
        font-size: 2rem;
        font-weight: bold;

        span{
          font-size: 0.9rem;
          font-weight: normal;
        }
      }

      .increase{
        flex: 4;
        color: #979fb9;
        font-size: 0.8rem;
        text-align: right;
        .up{
          color: #44d196;
        }

        .down{
          color: #d14444;
        }
      }
    }
  }
}

  

</style>